﻿<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
<meta charset="utf-8">
<title>系统界面</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<!-- css styles -->
<link href="css/bootstrap.css" rel="stylesheet"><!--基本样式-->
<link href="css/style.css" rel="stylesheet"><!--样式-->
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/animate.delay.css" rel="stylesheet"><!--图片动画-->
<link href="css/font-awesome.min.css" rel="stylesheet" ><!--字体图标-->
<!--[if IE 7]>
<link href="css/font-awesome-ie7.min.css" rel="stylesheet">
<![endif]-->

</head>

<body>
<!-------头部------->
<div id="header-container">
	<div id="header">
		<div class="logo">恒盛管理系统 v2.0</div>
		<div class="header-right">
			<div class="header-btn">
				<ul>
					<li><a href="#"><i class="icon-group"></i> 管理员 欢迎登录！</a></li>
					<li class="dropdown notification"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#"> <i class="icon-envelope"></i> 消息 <span class="message">5</span></a>
						<ul class="dropdown-menu">
							<li><a href=""><span class="icon-envelope"></span> 新消息来至 <strong>Jack</strong>  <small class="muted"> - 19 小时前</small></a></li>
							<li><a href=""><span class="icon-envelope"></span> 新消息来至 <strong>管理员</strong> <small class="muted"> - 2 小时前</small></a></li>
							<li><a href=""><span class="icon-user"></span> <strong>光光</strong> 有新的回复 <small class="muted"> - 2 小时前</small></a></li>
							<li class="viewmore"><a href="">查看更多信息</a></li>
						</ul>
					</li>
					<li class="dropdown userinfo"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/page.html"> <i class="icon-cog"></i> 管理</a>
						<ul class="dropdown-menu">
							<li><a href=""><span class="icon-user"></span> 个人资料</a></li>
							<li><a href=""><span class="icon-cog"></span> 系统设置</a></li>
							<li><a href=""><span class="icon-group"></span> 用户管理</a></li>
							<li class="divider"></li>
							<li><a href=""><span class="icon-signout"></span> 退出系统</a></li>
						</ul>
					</li>
					<li><a href="#"><i class="icon-signout"></i> 退出</a></li>
				</ul>
			</div>
			<div class="header-path"> 
				<div class="header-full"><a class="showmenu" href="#" title="全屏"> <i class="icon-fullscreen"></i> 全屏</a></div>
				<a href="#"> <i class="icon-home"></i> 首页 </a>
				<i class=" icon-angle-right"></i>  表单样式
			</div>
		</div>
	</div>
</div><!-------头部结束------->   
<!-------内容------->   
<div id="main-container">
<div class="contentinner content-dashboard">
	<!-------左侧导航------->   
	<div id="main-sidebar" class="sidebar">
			<ul id="mainSideMenu" class="nav-side">
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accDash" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <i class="chevron icon-angle-right"></i> <span class="item-icon icon-desktop"></span> 基本样式 </a> </div>
                    <ul class="accordion-content nav collapse" id="accDash">
                        <li> <a href="demo.html"> <i class="icon-caret-right"></i> 样式 1 </a> </li>
                        <li> <a href="demo2.html"> <i class="icon-caret-right"></i> 样式 2 </a> </li>
						<li> <a href="demo3.html"> <i class="icon-caret-right"></i> 样式 3 </a> </li>
                    </ul>
                </li>
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accForms" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <i class="chevron icon-angle-right"></i> <span class="item-icon icon-list-alt"></span> 表单样式 </a> </div>
                    <ul class="accordion-content nav collapse" id="accForms">
                        <li> <a href="form.html"> <i class="icon-caret-right"></i> 表单元素 </a> </li>
                        <li> <a href="form2.html"> <i class="icon-caret-right"></i> 扩展样式 </a> </li>
                        <li> <a href="form3.html"> <i class="icon-caret-right"></i> 引导样式</a> </li>
                    </ul>
                </li>
               <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accComponents" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <i class="chevron icon-angle-right"></i> <span class="item-icon icon-cogs"></span> 组件样式 </a> </div>
                    <ul class="accordion-content nav collapse" id="accComponents">
                        <li> <a href="media.html"> <i class="icon-caret-right"></i> 通知样式 </a> </li>
                        <li> <a href="media2.html"> <i class="icon-caret-right"></i> 滑块样式 </a> </li>
                        <li> <a href="media3.html"> <i class="icon-caret-right"></i> 结构样式 </a> </li>
                        <li> <a href="media4.html"> <i class="icon-caret-right"></i> 图片样式 </a> </li>
                    </ul>
                </li>
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accTables" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <i class="chevron icon-angle-right"></i> <span class="item-icon icon-table"></span> 表格样式 </a> </div>
                    <ul class="accordion-content nav collapse" id="accTables">
                        <li> <a href="table.html"> <i class="icon-caret-right"></i> 基础表格 </a> </li>
                        <li> <a href="table2.html"> <i class="icon-caret-right"></i> 数据表格 </a> </li>
                    </ul>
                </li>
                <li class="accordion-group">
                    <div class="accordion-heading active"> <a href="#accStatistics" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <i class="chevron icon-angle-right"></i> <span class="item-icon icon-signal"></span> 统计样式 </a> </div>
                    <ul class="accordion-content nav collapse in" id="accStatistics">
                        <li class="active"> <a href="chart.html"> <i class="icon-caret-right"></i> 图表样式 </a> </li>
                        <li> <a href="chart2.html"> <i class="icon-caret-right"></i> 趋势图 </a> </li>
                    </ul>
                </li>
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accWidgets" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <i class="chevron icon-angle-right"></i> <span class="item-icon  icon-text-width"></span> 文字样式 </a> </div>
                    <ul class="accordion-content nav collapse" id="accWidgets">
                        <li> <a href="text.html"> <i class="icon-caret-right"></i> 文字样式 </a> </li>
                        <li> <a href="text2.html"> <i class="icon-caret-right"></i> 列表样式 </a> </li>
                    </ul>
                </li>
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accButtons" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <i class="chevron icon-angle-right"></i> <span class="item-icon icon-tasks"></span> 元素样式 </a> </div>
                    <ul class="accordion-content nav collapse" id="accButtons">
                        <li> <a href="ui.html"> <i class="icon-caret-right"></i> 按钮样式 </a> </li>
                        <li> <a href="ui2.html"> <i class="icon-caret-right"></i> 字体图标 </a> </li>
                        <li> <a href="ui3.html"> <i class="icon-caret-right"></i> 切换标签 </a> </li>
                        <li> <a href="ui4.html"> <i class="icon-caret-right"></i> 弹出层 </a> </li>
                        <li> <a href="ui5.html"> <i class="icon-caret-right"></i> 进度条 </a> </li>
                    </ul>
                </li>
            </ul>
		</div><!-------左侧导航结束------->       
	<!-------右侧内容------->   
	<div class="main-content container-fluid">
	
		<h4 class="widgettitle">线形图 </h4>
		<div class="widgetcontent"> 
			<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>               
		</div><!--颜色选择结束--> 
			
		<h4 class="widgettitle">柱形图 </h4>
		<div class="widgetcontent"> 
			<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
		</div><!--颜色选择结束-->
		
		<h4 class="widgettitle">饼图 </h4>
		<div class="widgetcontent"> 
			<div id="container3" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
		</div><!--颜色选择结束-->
			 
	</div><!-------右侧内容结束------->    
</div>      
</div><!-------内容结束-------> 
<!-------底部------->    
<div class="footer">
	<div class="footerleft">恒盛管理系统 v2.0</div>
	<div class="footerright">&copy; Ish365.com - <a href="#">关注微博</a> - <a href="#">关注微信</a></div>
</div><!--底部结束-->    
<script src="js/jquery-1.10.2.min.js"></script> 
<script src="js/bootstrap.js"></script> 
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script><!--统计图表-->
<script type="text/javascript">
$(function () {
//线形图
        $('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });
	
//柱形图
 $(function () {
        $('#container2').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Tokyo',
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    
            }, {
                name: 'New York',
                data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
    
            }, {
                name: 'London',
                data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
    
            }, {
                name: 'Berlin',
                data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
    
            }]
        });
    });  
	
//饼图	
$(function () {
    $('#container3').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});
</script>
</body>
</html>
